<template>
  <div>
    <video
      autoplay="autoplay"
      loop="loop"
      id="localVideo"
      width="100%"
      height="100%"
    ></video>
    <button @click="startVr()">开始</button>
    <button @click="stopVr()">结束</button>
    <button @click="getInputVideoDevices()">获取视频输入设备</button>
    <div id="container-vr"></div>
  </div>
</template>

<script>
// import * as THREE from 'mxreality.js/build/three';

// import {
// 	VR,
// 	AVR
// } from 'mxreality.js/build/mxreality';

import * as THREE from "../../../public/js/three.js";
// import {
// 	VR,
// 	AVR
// } from 'mxreality.js/build/mxreality';

import { VR } from "../../../public/js/mxreality.js";

let vr;
let container;
let renderer;
var tvvssdk;
export default {
  name: "Test",
  data() {
    return {};
  },
  methods: {
    startVr() {
      console.log(THREE);
      window.THREE = THREE; // 重要，不设置则会报THREE未定义错误！！！！！！
      let videoTag = document.getElementById("localVideo");
      container = document.getElementById("container-vr");
      renderer = new THREE.WebGLRenderer();
      container.appendChild(renderer.domElement);
      let scene = new THREE.Scene();
      let geometry = new THREE.SphereBufferGeometry(200, 60, 40);
      geometry.scale(-1, 1, 1);
      let texture = new THREE.VideoTexture(videoTag);

      let material = new THREE.MeshBasicMaterial({
        map: texture
      });
      let mesh = new THREE.Mesh(geometry, material);
      scene.add(mesh);
      vr = new VR(scene, renderer, container);

      vr.init(function() {});

      // var media =videoTag.captureStream();
      //vr.playPanorama("",vr.resType.video);

      //	document.getElementById("toolBar").style.display = 'none'
    },
    stopVr() {
      container.removeChild(renderer.domElement);
      renderer.dispose();
      renderer.forceContextLoss();
      renderer.context = null;
      renderer.domElement = null;
      renderer = null;
    },
    getInputVideoDevices() {
      tvvssdk.getInputVideoDevices(function(devices) {
        console.log(devices);
      });
    }
  },
  created() {
    tvvssdk = this.$tvvssdk;
  }
};
</script>

<style></style>
